<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue3 API测试工具</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            color: #333;
            background: linear-gradient(135deg, #1e5799, #207cca);
            min-height: 100vh;
            padding: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .container {
            width: 100%;
            max-width: 600px;
            background: white;
            border-radius: 10px;
            box-shadow: 0 5px 25px rgba(0,0,0,0.2);
            overflow: hidden;
        }
        header {
            background: linear-gradient(to right, #2c3e50, #4a6491);
            color: white;
            padding: 20px;
            text-align: center;
        }
        h1 {
            font-size: 1.8rem;
            margin-bottom: 5px;
        }
        .description {
            font-size: 1rem;
            opacity: 0.9;
        }
        .content {
            padding: 20px;
        }
        .request-section {
            margin-bottom: 30px;
            padding: 15px;
            border-radius: 8px;
            background: #f8f9fa;
        }
        .request-section h2 {
            margin-bottom: 15px;
            color: #2c3e50;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .request-section h2 i {
            font-size: 1.3rem;
        }
        .url {
            background: #e9ecef;
            padding: 10px 15px;
            border-radius: 6px;
            margin-bottom: 15px;
            font-family: monospace;
            word-break: break-all;
            border-left: 3px solid #3498db;
        }
        .params {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            margin-bottom: 15px;
        }
        .param-item {
            display: flex;
            flex-direction: column;
        }
        .param-item label {
            font-weight: 600;
            margin-bottom: 5px;
            color: #495057;
        }
        .param-item input {
            padding: 8px 12px;
            border: 1px solid #ced4da;
            border-radius: 4px;
            font-size: 1rem;
        }
        .btn {
            display: block;
            width: 100%;
            padding: 12px;
            border: none;
            border-radius: 6px;
            color: white;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
            margin-top: 10px;
        }
        .btn:hover {
            opacity: 0.9;
            transform: translateY(-2px);
        }
        .btn:active {
            transform: translateY(1px);
        }
        .btn.get {
            background: linear-gradient(to right, #27ae60, #2ecc71);
        }
        .btn.post {
            background: linear-gradient(to right, #2980b9, #3498db);
        }
        .btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }
        .response-section {
            background: #2c3e50;
            color: white;
            padding: 15px;
            border-radius: 8px;
            margin-top: 20px;
        }
        .response-section h3 {
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .response-box {
            background: #34495e;
            padding: 12px;
            border-radius: 6px;
            font-family: monospace;
            max-height: 150px;
            overflow: auto;
            white-space: pre-wrap;
        }
        .status {
            display: inline-flex;
            align-items: center;
            padding: 4px 10px;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: bold;
            margin-left: 10px;
        }
        .status.pending {
            background-color: #f39c12;
        }
        .status.success {
            background-color: #27ae60;
        }
        .status.error {
            background-color: #e74c3c;
        }
        .loading {
            display: inline-block;
            width: 16px;
            height: 16px;
            border: 2px solid rgba(255,255,255,.3);
            border-radius: 50%;
            border-top-color: white;
            animation: spin 1s ease-in-out infinite;
            margin-right: 8px;
        }
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        .footer {
            text-align: center;
            padding: 15px;
            background: #f8f9fa;
            color: #6c757d;
            font-size: 0.9rem;
            border-top: 1px solid #e9ecef;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="container">
            <header>
                <h1>API测试工具</h1>
                <p class="description">使用Vue3和Fetch API进行接口测试</p>
            </header>
            
            <div class="content">
                <!-- GET请求区域 -->
                <div class="request-section">
                    <h2><span class="icon">📥</span> GET请求</h2>
                    <div class="url">{{ getUrl }}</div>
                    
                    <div class="params">
                        <div class="param-item">
                            <label for="name">姓名:</label>
                            <input type="text" id="name" v-model="getParams.name">
                        </div>
                        <div class="param-item">
                            <label for="age">年龄:</label>
                            <input type="number" id="age" v-model="getParams.age">
                        </div>
                    </div>
                    
                    <button 
                        class="btn get" 
                        @click="sendGetRequest"
                        :disabled="getLoading"
                    >
                        <span v-if="getLoading" class="loading"></span>
                        {{ getLoading ? '请求中...' : '发送GET请求' }}
                    </button>
                    
                    <div class="response-section">
                        <h3>
                            <span class="icon">📤</span> 响应结果
                            <span v-if="getStatus" :class="['status', getStatus]">
                                {{ getStatusText }}
                            </span>
                        </h3>
                        <div class="response-box">
                            {{ getResponse }}
                        </div>
                    </div>
                </div>
                
                <!-- POST请求区域 -->
                <div class="request-section">
                    <h2><span class="icon">📤</span> POST请求</h2>
                    <div class="url">{{ postUrl }}</div>
                    
                    <div class="params">
                        <div class="param-item">
                            <label for="bookname">书名:</label>
                            <input type="text" id="bookname" v-model="postParams.bookname">
                        </div>
                        <div class="param-item">
                            <label for="author">作者:</label>
                            <input type="text" id="author" v-model="postParams.author">
                        </div>
                    </div>
                    
                    <button 
                        class="btn post" 
                        @click="sendPostRequest"
                        :disabled="postLoading"
                    >
                        <span v-if="postLoading" class="loading"></span>
                        {{ postLoading ? '请求中...' : '发送POST请求' }}
                    </button>
                    
                    <div class="response-section">
                        <h3>
                            <span class="icon">📥</span> 响应结果
                            <span v-if="postStatus" :class="['status', postStatus]">
                                {{ postStatusText }}
                            </span>
                        </h3>
                        <div class="response-box">
                            {{ postResponse }}
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="footer">
                <p>使用Vue3实现 | 原生Fetch API | 无jQuery依赖</p>
            </div>
        </div>
    </div>

    <script>
        const { createApp, ref, reactive, computed } = Vue;
        
        createApp({
            setup() {
                // GET请求数据
                const getParams = reactive({
                    name: 'zs',
                    age: 20
                });
                
                // POST请求数据
                const postParams = reactive({
                    bookname: '水浒传',
                    author: '施耐庵'
                });
                
                // 响应数据和状态
                const getResponse = ref('等待发送GET请求...');
                const postResponse = ref('等待发送POST请求...');
                const getLoading = ref(false);
                const postLoading = ref(false);
                const getStatus = ref('');
                const postStatus = ref('');
                
                // 计算属性
                const getUrl = computed(() => {
                    const params = new URLSearchParams(getParams).toString();
                    return `http://127.0.0.1/api/get?${params}`;
                });
                
                const postUrl = computed(() => {
                    return 'http://127.0.0.1/api/post';
                });
                
                const getStatusText = computed(() => {
                    return getStatus.value === 'pending' ? '请求中' : 
                           getStatus.value === 'success' ? '成功' : 
                           getStatus.value === 'error' ? '失败' : '';
                });
                
                const postStatusText = computed(() => {
                    return postStatus.value === 'pending' ? '请求中' : 
                           postStatus.value === 'success' ? '成功' : 
                           postStatus.value === 'error' ? '失败' : '';
                });
                
                // 方法
                const sendGetRequest = async () => {
                    getLoading.value = true;
                    getStatus.value = 'pending';
                    getResponse.value = '请求中...';
                    
                    try {
                        const response = await fetch(getUrl.value, {
                            method: 'GET',
                            headers: {
                                'Accept': 'application/json'
                            }
                        });
                        
                        if (!response.ok) {
                            throw new Error(`请求失败: ${response.status}`);
                        }
                        
                        const data = await response.json();
                        getResponse.value = JSON.stringify(data, null, 2);
                        getStatus.value = 'success';
                    } catch (error) {
                        getResponse.value = `错误: ${error.message || '连接被拒绝或服务器未响应'}`;
                        getStatus.value = 'error';
                    } finally {
                        getLoading.value = false;
                    }
                };
                
                const sendPostRequest = async () => {
                    postLoading.value = true;
                    postStatus.value = 'pending';
                    postResponse.value = '请求中...';
                    
                    try {
                        const response = await fetch(postUrl.value, {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'Accept': 'application/json'
                            },
                            body: JSON.stringify(postParams)
                        });
                        
                        if (!response.ok) {
                            throw new Error(`请求失败: ${response.status}`);
                        }
                        //console.log(response,'response');
                        const data = await response.json();
                        console.log(data,'data');
                        postResponse.value = data;
                        let json = JSON.stringify(data, null, 2)
                        console.log(json,'json');
                        //postResponse.value = JSON.stringify(data, null, 2);
                        postStatus.value = 'success';
                    } catch (error) {
                        postResponse.value = `错误: ${error.message || '连接被拒绝或服务器未响应'}`;
                        postStatus.value = 'error';
                    } finally {
                        postLoading.value = false;
                    }
                };
                
                return {
                    getParams,
                    postParams,
                    getResponse,
                    postResponse,
                    getLoading,
                    postLoading,
                    getStatus,
                    postStatus,
                    getUrl,
                    postUrl,
                    getStatusText,
                    postStatusText,
                    sendGetRequest,
                    sendPostRequest
                };
            }
        }).mount('#app');
    </script>
</body>
</html>